<script setup lang="ts">
withDefaults(defineProps<Partial<{
  value1: string
  value2: string
  value3: string
}>>(), {
  value1: '1,572',
  value2: '1,653',
  value3: '722',
})
</script>

<template>
  <div class="clearfix indicators-value">
    <div class="item item-1">
      <span class="label">综合能源消费量（吨标准煤）</span>
      <strong class="value">{{ value1 == null ? '-' : value1 }}</strong>
    </div>
    <div class="item item-2">
      <span class="label">工业总产值（万元）</span>
      <strong class="value">{{ value2 == null ? '-' : value2 }}</strong>
    </div>
    <div class="item item-3">
      <span class="label">能源消费总量（吨标准煤）</span>
      <strong class="value">{{ value3 == null ? '-' : value3 }}</strong>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item {
  float: left;
  width: 33.33%;
  min-width: 148px;
  background-repeat: no-repeat;
  color: #fff;
  padding: 1.7rem 0 0 4.2rem;

  & > * {
    display: block;
  }
}
@for $index from 1 through 3 {
  .item-#{$index} {
    background-image: url('./bg-#{$index}.png');
  }
}

.label {
  font-style: italic;
  font-weight: 600;
}
.value {
  font-size: 22px;
  color: rgba(62, 235, 255, 1);
}
</style>
